<template>
  <view class="category">
    <!-- 1.1 搜索框 开始-->
    <YgSearch></YgSearch>
    <!-- 1.1 搜索框 结束-->

    <!-- 2.1 内容 开始 -->
    <view class="content">
      <view class="left">
        <view
          :class="currentIndex === index ? 'title-item active' : 'title-item'"
          v-for="(item, index) in titles"
          :key="item"
          @click="handleMenuSelect(index)"
          >{{ item }}</view
        >
      </view>
      <scroll-view class="right" scroll-y :scroll-top="scrollTop">
        <view class="goods-group" v-for="item1 in goods" :key="item1.cat_id">
          <view class="goods-title"> {{ item1.cat_name }}</view>
          <view class="goods-list">
            <navigator
              :url="'/pages/goods_list/goods_list?id=' + item2.cat_id"
              v-for="item2 in item1.children"
              :key="item2.cat_id"
            >
              <image :src="item2.cat_icon" mode="widthFix"></image>
              <view class="goods-subtitle">{{ item2.cat_name }}</view>
            </navigator>
          </view>
        </view>
      </scroll-view>
    </view>
    <!-- 2.1 内容 结束 -->
  </view>
</template>

<script>
// 商品分类数据  大数组
let categories = [];
export default {
  data() {
    return {
      // 左侧的标题数组
      titles: [],
      // 右侧要显示 的商品内容
      goods: [],
      // 选中的标题的索引
      currentIndex: 0,
      categories: [],
      scrollTop: 0,
    };
  },
  async onLoad() {
    // 存进去的key和数据格式是这样
    // set("category",{当初存数据的时间戳，接口当中的数据})

    // 缓存中的数据
    let storageCategory = uni.getStorageSync("category");
    if (storageCategory) {
      // 判断这个缓存是否存在
      if (Date.now() - storageCategory.time > 1000 * 30) {
        console.log("过期了");
        this.getCategory();
      } else {
        console.log("没有过期");
        categories = storageCategory.data; // 修改数据的来源即可
        this.title = categories.map((v) => v.cat_name);
        this.goods = categories[0].children;
      }
    } else {
      console.log("不存在");
      this.getCategory();
    }
    // const res = await this.$u.get("/categories");
    // categories = res.message;
    // this.titles = categories.map((v) => v.cat_name);
    // this.goods = categories[0].children;
  },
  methods: {
    async getCategory() {
      const res = await this.$u.get("/categories");
      categories = res.message;
      this.titles = categories.map((v) => v.cat_name);
      this.goods = categories[0].children;
      // 存储到缓存中
      uni.setStorageSync("category", { time: Date.now(), data: res.message });
    },
    handleMenuSelect(index) {
      this.currentIndex = index;
      this.goods = categories[index].children;

      // 设置右侧的滚动距离 为 0
      // 如果两次设置的值 都是相同 的那么等于没有设置过  又该怎么办了
      //每一次点击的时候 都生成一个不重复的小于1的小数 无线接近于 0
      this.scrollTop =
        Math.random() *
        Math.random() *
        Math.random() *
        Math.random() *
        Math.random() *
        Math.random();
    },
  },
};
</script>

<style lang="scss">
.category {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1;
  overflow: hidden;
  display: flex;
  .left {
    width: 180rpx;
    overflow: auto;
    .title-item {
      height: 80rpx;
      font-size: 28rpx;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .active {
      color: $themeColor;
      position: relative;
      // border-left: 5rpx solid $themeColor;
      &::before {
        content: "";
        width: 5rpx;
        height: 80%;
        background-color: $themeColor;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        position: absolute;
      }
    }
  }
  .right {
    flex: 1;
    overflow: auto;
    .goods-group {
      .goods-title {
        height: 80rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28rpx;
      }

      .goods-list {
        display: flex;

        flex-wrap: wrap;
        navigator {
          width: 33.33%;
          text-align: center;
          image {
            width: 60%;
          }

          .goods-subtitle {
            font-size: 26rpx;
          }
        }
      }
    }
  }
}
</style>
